<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-button v-auth:add slot="extra" type="primary" icon="plus" @click="$refs.form.create()">新建</a-button>
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="姓名">
          <a-input allowClear :maxLength="8" autocomplete="off" placeholder="请输入姓名" v-decorator="['trueName']" style="width:150px" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input allowClear :maxLength="11" autocomplete="off" placeholder="请输入手机号" v-decorator="['mobilePhone']" style="width:150px" />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input allowClear :maxLength="16" autocomplete="off" placeholder="请输入用户名" v-decorator="['userName']" style="width:150px" />
        </a-form-item>
        <sjht-search-submit hide-reset></sjht-search-submit>
      </a-form>

      <div slot="action" class="table-action" slot-scope="text,record,index">
        <span v-auth:edit>
          <a @click.stop="$refs.form.update(record)">修改</a>
          <a-divider type="vertical" />
        </span>
        <a-popconfirm v-auth:del :title="`确定删除【${record.trueName}】吗？`" @confirm="onDelete(record.id,index)">
          <a class="delete">删除</a>
        </a-popconfirm>
      </div>
      <span slot="roles" slot-scope="roles">
        <template v-if="roles">
          <a-tag v-for="(role,index) in roles.split(',')" :key="index" color="blue">{{ role }}</a-tag>
        </template>
      </span>
      <template slot="status" slot-scope="status,record">
        <a-switch :defaultChecked="Boolean(status)" checkedChildren="启用" unCheckedChildren="停用" :disabled="authDisabled(status)" @change="onChange(record.id,$event)" />
      </template>
    </a-table>
    <sjht-user-form ref="form" @success="loadData" />
  </a-card>
</template>
<script>
import { Tag } from 'ant-design-vue'
import { table, tableAction, searchForm } from '@/utils/mixins'
import { PageUser, DeleteUser, UpdateSelective } from '@/api/manage/user'
import UserForm from './modules/form'
export default {
  name: 'UserList', //用户管理
  components: { [UserForm.name]: UserForm, [Tag.name]: Tag },
  mixins: [table, tableAction, searchForm],
  data() {
    return {
      loadApi: PageUser,
      deleteApi: DeleteUser, //删除接口
      updateApi: UpdateSelective //修改接口
    }
  },
  created() {
    this.columns.unshift({ title: '操作', key: 'operation', width: 90, align: 'center', scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: '姓名', dataIndex: 'trueName', width: 100 },
      { title: '手机号', dataIndex: 'mobilePhone', width: 100 },
      { title: '用户名', dataIndex: 'userName', width: 120, ellipsis: true },
      { title: '状态', dataIndex: 'status', width: 75, align: 'center', scopedSlots: { customRender: 'status' } },
      { title: '创建时间', dataIndex: 'addTime', width: 145 },
      { title: '组织机构', dataIndex: 'orgName', width: 150 },
      { title: '用户角色', dataIndex: 'roleName', scopedSlots: { customRender: 'roles' } }
    )
  },
  mounted() {
    this.loadData()
  }
}
</script>
